<template>
  <div id="display" ref="appRef">
    <div class="bg">
      <img class="bg-img" src="@/assets/pageBg.png" alt="" />
      <dv-loading v-if="loading">Loading...</dv-loading>
      <div v-else class="host-body">
        <div class="d-flex jc-center">
          <dv-decoration-10 class="dv-dec-10" />
          <div class="d-flex jc-center">
            <dv-decoration-8 class="dv-dec-8" :color="decorationColor" />
            <div class="title" style="margin-bottom: 40px;">
              <div style="position: relative; top: 80px;">
                <span class="title-text">心智守护哨</span>
              </div>
              <dv-decoration-6
                class="dv-dec-6"
                :reverse="true"
                :color="['#50e3c2', '#67a1e5']"
              />
            </div>
            <dv-decoration-8
              class="dv-dec-8"
              :reverse="true"
              :color="decorationColor"
            />
          </div>
          <dv-decoration-10 class="dv-dec-10-s" />
        </div>

        <!-- 第二行 -->
        <div class="d-flex jc-between px-2">
          <div class="d-flex aside-width">
            <div class="react-left ml-4 react-l-s">
              <span class="react-left"></span>
              <span class="text"></span>
            </div>
            <div class="react-left ml-3">
              <span class="text"></span>
            </div>
          </div>
          <div class="d-flex aside-width">
            <div class="react-right bg-color-blue mr-3">
              <span class="text fw-b">一大队二队</span>
            </div>
            <div class="react-right mr-4 react-l-s">
              <span class="react-after"></span>
              <span class="text"
                >{{ dateYear }} {{ dateWeek }} {{ dateDay }}</span
              >
            </div>
          </div>
        </div>

        <div class="body-box">
          <!-- 内容区域 -->
          <div class="content-box">
            <!-- 第一行模块 -->
            <div class="row-modules first-row">
              <div class="module-item">
                <dv-border-box-12>
                  <OutgoingCount />
                </dv-border-box-12>
              </div>
              <div class="module-item">
                <dv-border-box-12>
                  <GradeComparison />
                </dv-border-box-12>
              </div>
              <div class="module-item">
                <dv-border-box-12>
                  <AttendanceStatus />
                </dv-border-box-12>
              </div>
            </div>

            <!-- 第二行模块 -->
            <div class="row-modules second-row">
              <div class="module-item key-discipline-container">
                <!-- 重点人员和均荣风纪垂直排列 -->
                <div class="stacked-modules">
                  <div class="stacked-module">
                    <div class="key-personnel-wrapper" style="position: relative; width: 100%; height: 100%;">
                      <dv-border-box-12 class="border-svg" style="position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none;" />
                      <div style="position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 1;">
                        <KeyPersonnel />
                      </div>
                    </div>
                  </div>
                  <div class="stacked-module">
                    <dv-border-box-12>
                      <DisciplineStatus />
                    </dv-border-box-12>
                  </div>
                </div>
              </div>
              <div class="module-item">
                <dv-border-box-12>
                  <CornInspection />
                </dv-border-box-12>
              </div>
              <div class="module-item">
                <dv-border-box-12>
                  <DormitoryStatus />
                </dv-border-box-12>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import drawMixin from "../utils/drawMixin";
import { formatTime } from '../utils/index.js'

// 导入新的模块组件
import OutgoingCount from './OutgoingCount.vue'
import GradeComparison from './GradeComparison.vue'
import AttendanceStatus from './AttendanceStatus.vue'
import KeyPersonnel from './KeyPersonnel.vue'
import DisciplineStatus from './DisciplineStatus.vue'
import CornInspection from './CornInspection.vue'
import DormitoryStatus from './DormitoryStatus.vue'

export default {
  mixins: [ drawMixin ],
  data() {
    return {
      timing: null,
      loading: true,
      dateDay: null,
      dateYear: null,
      dateWeek: null,
      weekday: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
      decorationColor: ['#568aea', '#000000']
    }
  },
  components: {
    OutgoingCount,
    GradeComparison,
    AttendanceStatus,
    KeyPersonnel,
    DisciplineStatus,
    CornInspection,
    DormitoryStatus
  },
  computed: {
    isFreshmanAdmin() {
      try {
        const vuex = window.localStorage.getItem('vuex');
        if (!vuex) return false;
        const user = JSON.parse(JSON.parse(vuex).auth.currentUser || '{}');
        return user.role === '5' || user.role === 5;
      } catch (e) { return false; }
    }
  },
  mounted() {
    if (this.isFreshmanAdmin) {
      this.$router.replace('/questionnaire-processing');
      return;
    }
    this.timeFn()
    this.cancelLoading()
    // 触发重新计算大屏缩放比例
    setTimeout(() => {
      this.calcRate()
    }, 100)
  },
  beforeDestroy () {
    clearInterval(this.timing)
  },
  methods: {
    timeFn() {
      this.timing = setInterval(() => {
        this.dateDay = formatTime(new Date(), 'HH: mm: ss')
        this.dateYear = formatTime(new Date(), 'yyyy-MM-dd')
        this.dateWeek = this.weekday[new Date().getDay()]
      }, 1000)
    },
    cancelLoading() {
      setTimeout(() => {
        this.loading = false
      }, 500)
    }
  },
  render(h) {
    if (this.isFreshmanAdmin) {
      return null;
    }
    return this.$options.__originalRender ? this.$options.__originalRender.call(this, h) : undefined;
  }
}
</script>

<style lang="scss" scoped>
#display {
  color: #d3d6dd;
  width: 100vw;
  height: 100vh;
  position: relative;
  overflow: hidden;

  // 添加全局颜色类
  .colorBlue {
    color: #68d8fe;
  }

  .bg {
    width: 100%;
    height: 100%;
    min-width: 100vw;
    min-height: 100vh;
    padding: 10px 16px 0 16px;
    background-image: url("~@/assets/pageBg.png");
    background-size: 100% 100% !important;
    background-position: center center;
  }

  .host-body {
    .dv-dec-10,
    .dv-dec-10-s {
      width: 33.3%;
      height: 4px;
    }
    .dv-dec-10-s {
      transform: rotateY(180deg);
    }
    .dv-dec-8 {
      width: 200px;
      height: 40px;
    }
    .title {
      position: relative;
      width: 500px;
      text-align: center;
      background-size: cover;
      background-repeat: no-repeat;

      .title-text {
        color: #68d8fe;
        font-size: 60px;
        position: absolute;
        bottom: 1px;
        left: 40%;
        transform: translate(-50%);
      }

      .dv-dec-6 {
        width: 100%;
        height: 30px;
      }
    }

    .aside-width {
      width: 40%;
    }

    .react-left {
      background-color: #68d8fe;
      width: 10px;
      height: 10px;
    }

    .react-right {
      background-color: #68d8fe;
      width: 10px;
      height: 10px;
    }

    .react-after {
      background-color: #68d8fe;
      width: 10px;
      height: 10px;
    }

    .react-left {
      width: 170px;
      height: 28px;
      line-height: 28px;
      text-align: center;
      background-color: rgba(19, 25, 47, 0.8);
      border-radius: 2px;
      position: relative;
      margin-top: 10px;
    }

    .react-left:before {
      position: absolute;
      content: "";
      width: 10px;
      height: 10px;
      top: 9px;
      left: -5px;
      background-color: #68d8fe;
      transform: rotate(45deg);
    }

    .react-l-s:before {
      position: absolute;
      content: "";
      width: 10px;
      height: 10px;
      top: 9px;
      left: -5px;
      background-color: #68d8fe;
      transform: rotate(45deg);
    }

    .react-right {
      width: 250px;
      height: 28px;
      line-height: 28px;
      text-align: center;
      background-color: rgba(19, 25, 47, 0.8);
      border-radius: 2px;
      position: relative;
      margin-top: 10px;
    }

    .react-right:before {
      position: absolute;
      content: "";
      width: 10px;
      height: 10px;
      top: 9px;
      right: -5px;
      background-color: #68d8fe;
      transform: rotate(45deg);
    }

    .react-l-s:after {
      position: absolute;
      content: "";
      width: 10px;
      height: 10px;
      top: 9px;
      right: -5px;
      background-color: #68d8fe;
      transform: rotate(45deg);
    }

    .body-box {
      margin-top: 10px;
      display: flex;
      flex-direction: column;
    }

    .content-box {
      display: flex;
      flex-direction: column;
      margin-bottom: 10px;
      height: calc(100% - 100px);

      .row-modules {
        display: flex;
        margin-bottom: 10px;

        &:last-child {
          margin-bottom: 0;
        }

        &.first-row {
          height: 420px; /* 减少第一行模块的高度 */
        }

        &.second-row {
          height: 500px; /* 进一步增加第二行模块的高度，延伸至界面底部 */
        }

        &:nth-child(3) {
          flex: 1; /* 第三行模块保持弹性布局 */
        }

        .module-item {
          flex: 1;
          margin-right: 10px;
          height: 100%;

          &:last-child {
            margin-right: 0;
          }

          &.key-discipline-container {
            display: flex;
            flex-direction: column;

            .stacked-modules {
              display: flex;
              flex-direction: column;
              height: 100%;

              .stacked-module {
                flex: 1;
                margin-bottom: 10px;

                &:last-child {
                  margin-bottom: 0;
                }
              }
            }
          }
        }
      }
    }

    /* 移除媒体查询，因为我们现在使用固定尺寸和等比例缩放 */
  }

  .bg-img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    object-fit: cover;
    z-index: 0;
    pointer-events: none;
    user-select: none;
  }
  .bg > *:not(.bg-img) {
    position: relative;
    z-index: 1;
  }
}
</style>
